<template>
	<view class="home">
		<u-navbar title="浅住租房" :bgColor="bgColor" :titleStyle="titleStyle" :placeholder="true">
			<view class="u-nav-slot" slot="left"
				style="display: flex;font-size: 28rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;"
				@click="handleLocation">
				<u-icon name="map" size="19" color="#ffffff"></u-icon>
				<view class="" style="margin-left: 5rpx;">
					{{city}}
				</view>
			</view>
		</u-navbar>

		<view class="pageBG"></view>

		<view class="searchBox" @click="handleGotoSearch">
			<image class="searchIcon" src="http://youcaius.top/uploads/image/searchIcon.png"
				style="width: 26rpx; height: 26rpx;">
			</image>
			<input class="inputItem" type="text" placeholder="请输入房源号、社区或房源名称进行搜索" :disabled="true">
		</view>

		<!-- <view class="" :style="{'height':globalData.navHeight-10 +'px'}"></view> -->
		<view class="bannerBoxOut">
			<view class="bannerBox">
				<view class="bannerContent">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						style="width: 690rpx; height: 320rpx;">
						<swiper-item v-for="(item,index) in bannerList" :key="index" style="text-align: center;">
							<image class="contentImg" :src="item.image"
								style="width: 690rpx; height: 320rpx; border-radius: 20rpx;"
								@click="handleTypeDetail(item)"></image>
						</swiper-item>
					</swiper>

				</view>

			</view>

		</view>

		<!-- <view class="" :style="{'height':430 +'rpx'}"></view> -->
		<view class="sortBox">
			<view class="sortItem" v-for="(item,index) in categoryListleft" :key="item.id"
				@click="handleGotoHouse(item,index)">
				<image class="sortimg" :src="item.image" alt="Thumbnail"
					style="width: 76rpx; height: 76rpx; border-radius: 10rpx;">
				</image>
				<view class="sorttext">
					{{item.name}}
				</view>
			</view>
			<view class="sortItem" @click="handleSao">
				<image class="sortimg" src="@/static/image/sao.png"
					style="width: 76rpx; height: 76rpx; border-radius: 10rpx;">
				</image>
				<view class="sorttext">
					扫一扫
				</view>
			</view>
			<view class="sortItem" v-for="(item,index) in categoryListRight" :key="item.id"
				@click="handleGotoHouse(item,index+2)">
				<image class="sortimg" :src="item.image" style="width: 76rpx; height: 76rpx; border-radius: 10rpx;">
				</image>
				<view class="sorttext">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="RefreshBox">
			<view class="RefreshLeft">
				<image class="refreshimg" src="http://youcaius.top/uploads/image/locationIcon.png"
					style="width: 40rpx; height: 40rpx;">
				</image>
				<view class="refreshtext">
					离我最近
				</view>
			</view>

			<view class="RefreshRight">
				<image class="refreshimg" src="http://youcaius.top/uploads/image/shuaxin.png"
					style="width: 26rpx; height: 26rpx;">
				</image>
				<view class="refreshtext" @click="handleSx">
					刷新
				</view>
			</view>

		</view>

		<view v-if="houseList.length" class="DataListBox" id="ListBoxID">
			<view v-if="loginbtn" class="dataItem" v-for="(item,index) in houseList" :key="index"
				@click="handleDetail(item.id)">
				<view class="dataItemLft">
					<image class="refreshimg" :src="item.image" mode="aspectFill"
						style="width: 290rpx; height: 240rpx;border-radius: 20rpx">
					</image>
				</view>
				<view class="dataItemRight">
					<view class="name">
						{{item.name}}
					</view>
					<view class="distanceBox">
						<view class="distance">
							<view class="">
								<text v-if="item.metro1">距</text>{{item.metro1 == null ? "" : item.metro1}}
							</view>
							<view v-if="item.remark" class="">
								{{item.metro == null ? "" : item.metro}}{{item.remark==null ? '' : item.remark}}米
							</view>
						</view>
						<view class="km" style="color:#F8AD22 ;margin-top: 40rpx;">
							{{item.distance}}km
						</view>
					</view>
					<scroll-view class="advantage" scroll-x="true">
						<view class="advantageitem" v-for="(subitem,index) in item.advantage" :key="item.id">
							{{subitem.name}}
						</view>
					</scroll-view>
					<view class="expense">
						<view v-if="item.price !='0.00'" class="expenseitem">
							{{item.price}}元/月
						</view>
						<view v-else class="expenseitem">
							致电询价
						</view>
						<view class="collect">
							{{item.collect}}收藏
						</view>
					</view>
				</view>
			</view>

			<button v-else v-for="(item,index) in houseList" :key="index" class="box_phone_yes"
				open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<view class="dataItem">
					<view class="dataItemLft">
						<image class="refreshimg" :src="item.image" mode="aspectFill"
							style="width: 290rpx; height: 240rpx;border-radius: 20rpx">
						</image>
					</view>
					<view class="dataItemRight">
						<view class="name">
							{{item.name}}
						</view>
						<view class="distanceBox">
							<view class="distance">
								<view class="">
									<text v-if="item.metro1">距</text>{{item.metro1 == null ? "" : item.metro1}}
								</view>
								<view v-if="item.remark" class="">
									{{item.metro == null ? "" : item.metro}}{{item.remark==null ? '' : item.remark}}米
								</view>
							</view>
							<view class="km" style="color:#F8AD22 ;margin-top: 40rpx;">
								{{item.distance}}km
							</view>
						</view>

						<scroll-view class="advantage" scroll-x="true">
							<view class="advantageitem" v-for="(subitem,index) in item.advantage" :key="item.id">
								{{subitem.name}}
							</view>
						</scroll-view>
						<view class="expense">
							<view v-if="item.price !='0.00'" class="expenseitem">
								{{item.price}}元/月
							</view>
							<view v-else class="expenseitem">
								致电询价
							</view>
							<view class="collect">
								{{item.collect}}收藏
							</view>
						</view>
					</view>
				</view>
			</button>



			<view class="" style="height: 100rpx;">
			</view>
		</view>
		<view v-else class="empty-sty">
			<u-empty mode="data" :text="loginFlag" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>


		<u-popup :show="newUsershow" mode="center" :round="10" bgColor="transparent">
			<view class="popcontent">
				<image src="../../static/image/newUser.png" style="width: 500rpx;height: 600rpx;border-radius: 40rpx;"
					mode=""></image>
				<view class="numbertext">
					{{timeNumber}}
				</view>
				<view class="btns" @click="handlechange">
				</view>
			</view>
			<view class="popclose" @click="handlechange">
				<u-icon name="close-circle" color="#ffffff" size="28"></u-icon>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		houseList,
		houseCategoryt,
		positioning,
		houseBanner,
		mineData,
		config,
		memberpop,
		house_list,
		obtain_city,
		obtainMobile,
		houseArea
	} from "@/api/api.js"
	export default {
		data() {
			return {
				bgColor: "#F8AD22",
				titleStyle: {
					color: "#ffffff",
					fontSize: "32rpx",
					fontFamily: "PingFang SC-Bold, PingFang SC",
					fontweight: "bold",
				},
				listTop: 0,
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},
				tabsHeight: "",
				categoryListleft: [],
				categoryListRight: [],
				city: "",
				houseList: [],
				bannerList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				pageNum: 1,
				loginFlag: "",
				newUsershow: false,
				timeNumber: "",
				house_latitude: "",
				house_longitude: "",
				loginbtn: false,
			}
		},
		onLoad() {
			// if(!uni.getStorageSync('location')){
			// }
			this.siteGzh()
			if (uni.getStorageSync("token")) {
				this.loginbtn = true
				this.loginFlag = "暂无房源"
				// this.getHouseList();
				// this.getMineData()
				const systemInfo = uni.getSystemInfoSync();
				const navigationBarHeight = systemInfo.screenHeight - systemInfo.windowHeight;
				this.tabsHeight = navigationBarHeight - systemInfo.statusBarHeight;

				let query = uni.createSelectorQuery().in(this);
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('#ListBoxID').boundingClientRect(data => {
					// console.log("ListBoxID", data.top) //这个就是距离顶部的高度
					this.listTop = data.top + 70 //赋值，待会要用
				}).exec();

				console.log('底部tabs的高度：', this.listTop);
				this.handleUserinfo()

			} else {
				this.loginFlag = "暂无房源"
				this.loginbtn = false

			}
			this.getHouseCategoryt()
			this.getHouseBanner()
		},
		onShow() {
			if (uni.getStorageSync("token")) {
				let handleData = uni.getStorageSync("handleData")
				if (handleData.flag) {
					console.log("uni.getStorageSync", uni.getStorageSync("handleData").flag)
					this.houseList.forEach((item, index) => {
						if (handleData.handleId == item.id) {
							if (handleData.type == 1) {
								item.collect++
							} else {
								item.collect--
							}
							uni.removeStorageSync("handleData")
							return
						}
					})
				}
				let handleLocationHome = uni.getStorageSync("handleLocationHome")
				if (handleLocationHome.flag) {
					this.city = handleLocationHome.city
					this.pageNum == 1
					this.getHouseList();
				}

			} else {
				let handleLocationHome = uni.getStorageSync("handleLocationHome")
				if (handleLocationHome.flag) {
					this.city = handleLocationHome.city
					this.pageNum == 1
					this.house_latitude = handleLocationHome.latitude
					this.house_longitude = handleLocationHome.longitude
					this.handlehouse_list()
				}
			}

			uni.removeStorageSync("handleLocationHome")
			uni.removeStorageSync("loadTypt")
		},
		onReachBottom() {
			this.pageNum++;
			if (uni.getStorageSync('token')) {
				this.getHouseList();
			} else {
				this.handlehouse_list()
			}
		},
		onPullDownRefresh() {
			// console.log("触发了下拉刷新"),
			setTimeout(() => {
				this.pageNum = 1;
				this.getHouseList();
				uni.stopPullDownRefresh();
			}, 2000)
		},
		methods: {
			handleSao() {
				let that = this
				uni.scanCode({
					success: function(res) {
						console.log("扫描内容", res.path)
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						if (res.path) {
							let code = that.getQueryParam(res.path)
							console.log("000000000", code.scene);
							uni.navigateTo({
								url: `/pages/housingresource/available?scene=${code.scene}`
							})
						}

					}
				});
			},

			// 截取邀请码
			getQueryParam(url) {
				let pattern = /(\w+)=(\w+)/ig; //定义正则表达式
				let parames = {}; // 定义参数对象
				url.replace(pattern, ($, $1, $2) => {
					parames[$1] = $2;
				});
				return parames;
			},

			async getMineData() {
				let res = await mineData()
				// console.log("个人信息", res)
				if (res.data.city == null) {
					// console.log("重新定位")
					// console.log("===============")
					this.siteGzh()
				} else {
					// console.log("?????????????????",this.city)
					this.city = res.data.city
					this.getHouseList();
				}
			},
			async getHouseBanner() {
				let res = await houseBanner()
				// console.log("轮播图", res)
				this.bannerList = res.data
			},
			async getHouseCategoryt() {
				let res = await houseCategoryt()
				if (res.code == 1000) {
					this.categoryListleft = res.data.slice(0, 2)
					this.categoryListRight = res.data.slice(2, 4)
				}
			},

			handleLocation() {
				uni.navigateTo({
					url: "./location"
				})
			},
			async getHouseList() {
				// console.log("2222222222------------3333333333333")
				let data = {
					position: "1",
					page: this.pageNum,
					page_size: 5,
				}
				let res = await houseList(data)
				if (res.message == "该地区暂无数据") {
					this.houseList = []
					uni.showToast({
						title: "该地区暂无房源！",
						icon: "none",
						duration: 1500
					});
					return
				}
				if (res.code == 1000) {
					if (res.data.data.length > 0) {
						if (this.pageNum == 1) {
							this.houseList = res.data.data;
						} else {
							this.houseList = this.houseList.concat(res.data.data)
						}
					} else {
						uni.showToast({
							title: '暂无更多房源',
							icon: "none",
							duration: 1000
						});
					}
					console.log("数据长度", this.houseList.length)
				} else {
					// this.pageNum --
					uni.showToast({
						title: "暂无更多数据",
						icon: "none",
						duration: 1000
					});
				}
			},

			async handlehouse_list() {
				let data = {
					position: "1",
					page: this.pageNum,
					page_size: 5,
					longitude: this.house_longitude,
					latitude: this.house_latitude,
					city: this.city
				}
				console.log("data", data)
				let res = await house_list(data)
				if (res.message == "该地区暂无数据") {
					this.houseList = []
					uni.showToast({
						title: "该地区暂无房源！",
						icon: "none",
						duration: 1500
					});
					return
				}
				if (res.code == 1000) {
					if (res.data.data.length > 0) {
						if (this.pageNum == 1) {
							this.houseList = res.data.data;
						} else {
							this.houseList = this.houseList.concat(res.data.data)
						}
					} else {
						uni.showToast({
							title: '暂无更多房源',
							icon: "none",
							duration: 1000
						});
					}
					console.log("数据长度", this.houseList.length)
				} else {
					// this.pageNum --
					uni.showToast({
						title: "暂无更多数据",
						icon: "none",
						duration: 1000
					});
				}
			},
			handleGotoHouse(item, index) {
				let category = {
					id: item.id,
					index: index
				}
				uni.setStorageSync("category", category)
				uni.switchTab({
					url: "../housingresource/index"
				})
			},
			handleSx() {
				this.pageNum = 1
				this.getHouseList()
				this.getHouseCategoryt()
				this.getHouseBanner()
			},

			handleTypeDetail(item) {
				console.log("banner", item)
				if (item.type == 1) {
					this.handleDetail(item.id)
					return
				}
				if (item.type == 2) {
					uni.navigateTo({
						url: `/pages/home/imgdetail?image=${item.images}`
					})
					return
				}
				if (item.type == 3) {
					uni.navigateTo({
						url: `/pages/home/contentDetail?content=${item.content}`
					})
					return
				}
				if (item.id == 14) {
					uni.navigateTo({
						url: "/pages/mine/membership"
					})
					return
				}
			},


			getNavbarHeight() {
				// 状态栏高度
				this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

				// #endif

				// console.log("高度", this.globalData)

			},
			handleGotoSearch() {
				uni.navigateTo({
					url: "./search"
				})
			},
			handleDetail(id) {

				if (uni.getStorageSync("token")) {
					uni.navigateTo({
						url: `./homedetail?id=${id}`
					})
				} else {
					uni.showToast({
						title: "登录后可查看房源详情",
						icon: "none",
					})
				}

			},

			// 获取定位、
			siteGzh() {
				// console.log("-========?????????---------")
				const that = this
				// getLocation
				uni.getFuzzyLocation({
					type: 'wgs84',
					success: async function(res) {
						// console.log("当前位置信息", res);
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						that.house_latitude = res.latitude
						that.house_longitude = res.longitude
						let positions = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						uni.setStorageSync('positions', positions)

						if (uni.getStorageSync('token')) {
							let subres = await positioning({
								longitude: res.longitude,
								latitude: res.latitude
							})
							if (subres.code == 1000) {
								// console.log("当前位置", subres)
								that.city = subres.data
								that.getHouseList()
								uni.setStorageSync("location", that.city)
								let cityres = await houseArea({
									city: that.city
								})
								uni.setStorageSync("areaList", cityres.data)
							}
						} else {
							let subres = await obtain_city({
								longitude: res.longitude,
								latitude: res.latitude
							})
							if (subres.code == 1000) {
								// console.log("当前位置", subres)
								that.city = subres.data
								uni.setStorageSync("location", that.city)
								that.handlehouse_list()
								let cityres = await houseArea({
									city: that.city
								})
								uni.setStorageSync("areaList", cityres.data)
							}

						}


					},
					fail(e) {
						console.log("eeeeeeeee", e)
					}
				});
			},
			async handleUserinfo() {
				let res = await mineData()
				if (res.data.is_pop == "0") {
					this.handleConfig()
				}
			},
			async handleConfig() {
				let res = await config()
				if (res.code == 1000)
					this.timeNumber = res.data[9].value
				this.newUsershow = true
			},
			async handlechange() {
				let res = await memberpop()
				if (res.code == 1000) {
					this.newUsershow = false
				}
			},


			async getPhoneNumber(e) {
				let that = this
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信获取code码", loginRes);
						that.logincode = loginRes.code
						let data = {
							code: that.logincode,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv
						}
						let res = await obtainMobile(data)
						if (res.code == 1000) {
							uni.setStorageSync("token", res.data.token)
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
							uni.reLaunch({
								url: "/pages/home/index"
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
						}
					}
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.box_phone_yes {
		background-color: transparent;
		border: none;
		width: 690rpx;
		padding: 0;
		text-align: left;
	}

	.box_phone_yes:after {
		border: none;
	}

	.popcontent {
		width: 500rpx;
		height: 600rpx;
		position: relative;

		.numbertext {
			color: #F8AD22;
			font-size: 38rpx;
			font-weight: 600;
			position: absolute;
			bottom: 161rpx;
			right: 145rpx;
		}

		.btns {
			width: 250rpx;
			height: 80rpx;
			border-radius: 100rpx;
			position: absolute;
			bottom: 40rpx;
			left: 115rpx
		}
	}

	.popclose {
		width: 500rpx;
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}

	.home {
		.navbar {
			width: 100%;
			height: 182rpx;
			background-color: #F8AD22;
			padding-top: 88rpx;
			box-sizing: border-box;

			.navbarContent {
				width: 100%;
				height: 88rpx;
				padding: 30rpx 22rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				position: relative;

				.Locations {
					display: flex;
					position: absolute;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 33rpx;
				}

				.title {
					width: 150rpx;
					margin: 0 auto;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

		.pageBG {
			width: 100%;
			height: 348rpx;
			background-color: #F8AD22;
			position: absolute;
			top: 0;
		}

		.searchBox {
			width: 690rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding-left: 66rpx;
			box-sizing: border-box;
			position: relative;
			margin: 0 auto;


			.inputItem {
				width: 624rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				opacity: 1;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 30rpx;
			}

			.searchIcon {
				position: absolute;
				top: 25rpx;
				left: 30rpx;
			}
		}

		.bannerBoxOut {
			width: 100%;
			background-color: #F7F8FA;
			// height: 430rpx;
			z-index: 999;
			// position: fixed;
		}

		.bannerBox {
			width: 100%;
			height: 348rpx;
			// background-color: #F8AD22;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: relative;
			padding-top: 15rpx;
			// position: fixed;
			// top: 168rpx;



			.bannerContent {
				width: 690rpx;
				height: 320rpx;
				margin-top: 20rpx;
			}
		}



		.sortBox {
			width: 690rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			margin-top: 32rpx;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			.sortItem {
				width: 78rpx;
				text-align: center;
				margin-right: 55rpx;

				.sorttext {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}
			}

			.sortItem:nth-child(5n) {
				margin-right: 0;
			}

		}


		.RefreshBox {
			width: 690rpx;
			height: 50rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// position: fixed;
			// top: 815rpx;
			// left: 30rpx;

			.RefreshLeft {
				display: flex;
				align-items: center;

				.refreshtext {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 38rpx;
					margin-left: 4rpx;
				}
			}

			.RefreshRight {
				width: 104rpx;
				height: 50rpx;
				background: #F8AD22;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				display: flex;
				align-items: center;
				padding-left: 10rpx;
				box-sizing: border-box;

				.refreshtext {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 50rpx;
					margin-left: 4rpx;
				}
			}

		}


		.DataListBox {
			// overflow: scroll;
			width: 690rpx;
			margin: 0 auto;
			margin-top: 10px;

			.dataItem {
				display: flex;
				width: 690rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-bottom: 20rpx;

				.dataItemLft {
					margin-right: 20rpx;
				}

				.dataItemRight {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					width: 390rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 33rpx;

					}

					.distanceBox {
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 26rpx;
						display: flex;
						justify-content: space-between;

						.distance {
							width: 200rpx;
						}

					}

					.advantage {
						white-space: nowrap;
						width: 100%;

						.advantageitem {
							height: 40rpx;
							padding: 5rpx 15rpx;
							background: #FFF5E1;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F06703;
							line-height: 40rpx;
							text-align: center;
							margin-right: 10rpx;
							display: inline-block;
						}
					}

					.expense {
						display: flex;
						justify-content: space-between;

						.expenseitem {
							font-size: 30rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #F23A00;
							line-height: 35rpx;
						}

						.collect {
							font-size: 22rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F8AD22;
							line-height: 26rpx;
						}
					}
				}
			}

		}

	}

	.empty-sty {
		padding-top: 50rpx;
	}
</style>